<template>
	<el-card class="dot-card">
		<div class="polyv-video-box">
			<polyv-video :options="options" :polyv-token="polyvToken" />
		</div>
		<choice-time
			:dot-data="dotData"
			:vid="vid"
			v-bind="$attrs"
			@submit-success="submitSuccess"
		/>
		<choice-knowledge
			ref="knowledgeRef"
			type="edit"
			:resource-video-dot-id="dotData.resourceVideoDotId"
			:default-data="dotData.knowledgeList"
			v-bind="$attrs"
			@update-success="submitSuccess"
		/>
		<choice-question
			ref="questionRef"
			type="edit"
			:project-ids="dotData.questionList"
			:resource-video-dot-id="dotData.resourceVideoDotId"
			v-bind="$attrs"
			@update-success="submitSuccess"
		/>
		<el-button
			class="save-btn"
			size="small"
			type="primary"
			:loading="deleteLoading"
			@click="onDeletePoint"
		>
			删除打点
		</el-button>
	</el-card>
</template>
<script>
import coursewareApi from "@rc/apis/rc/courseware.mjs";
import qbApi from "@rc/apis/qb/index.mjs";
import PolyvVideo from "@rc/pages/components/polyv-video.vue";
import ChoiceTime from "../../choice-time/index.vue"; //选择知识点
import ChoiceKnowledge from "../../choice-knowledge/index.vue"; //选择知识点
import ChoiceQuestion from "../../choice-question/index.vue"; //选择试题
export default {
    inheritAttrs: true,
    props: {
        vid: {
            type: String,
            required: true
        },
        dotData: {
            type: Object,
            default:()=>{},
        },
        polyvToken: {
            type: String,
            default: '',
        }
    },
    components:{
        PolyvVideo,
        ChoiceTime,
        ChoiceKnowledge,
        ChoiceQuestion
    },
    data() {
        return {
            options:{},
            deleteLoading:false,
            questionList:[],
        };
    },
    watch: {
        dotData:{
            immediate:true,
            handler(val){
                this.options = {
                    vid:this.vid,
                    width: "100%",
                    height: '200px',
                    start: val.startTime,
                    end: val.endTime,
                    autoplay: false,
                    ban_history_time:'on'
                };
                this.queryQuestionListByIds();
            }
        },
    },
    methods: {
        //根据试题id查询试题列表
        queryQuestionListByIds(){
            if(!this.dotData.questionList.length){
                return;
            }
            qbApi.queryQuestionListByIds({
                data: {
                    questionIds:this.dotData.questionList.toString()
                },
                success: (res) => {
                    this.questionList = res.data;
                }
            });
        },
        onDeletePoint(){
            this.$confirm('确定要删除该打点信息吗？删除后学员端也将同步删除该打点！', '删除提示', {
                type: 'warning'
            }).then(() => {
                this.deleteLoading= true;
                coursewareApi.deleteResourceVideoDot({
                    data: {
                        dotId:this.dotData.resourceVideoDotId
                    },
                    success: () => {
                        this.$message.success("删除打点成功");
                        this.$emit('delete-success');
                    },
                    complete: () => {
                    this.deleteLoading= false;
                    }
                });
            });

        },
        submitSuccess(){
            this.$emit('update-success');
        }
    },
};
</script>
<style lang="less" scoped>
.dot-card {
    box-sizing: border-box;
    width: calc(25% - 10px);
    min-width: 300px;
    flex-shrink: 0;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 8px;
    transition: all 0.2s linear;
    margin-bottom: 20px;
    /deep/ .el-card__body{
        padding: 10px;
    }
    .save-btn{
        margin: 0 auto;
    }
    @media (min-width: 1460px) {
        &:nth-child(4n+4) {
            margin-right:0;
        }
    }
    @media (max-width: 1460px) {
        width: calc(33.3% - 10px);
        &:nth-child(3n+3) {
            margin-right:0;
        }
    }
}
</style>
